<template>
    <el-divider><span>请选择你想要的饺子</span></el-divider>
    <el-form :model="dataForm" :rules="rule" ref="dataForm" label-width="120px">
        <el-form-item label="烧法" prop="method">
            <el-radio-group v-model="dataForm.method">
                <el-radio label="蒸" />
                <el-radio label="煮(有汤)" />
                <el-radio label="煮(把水沥干)" />
                <el-radio label="烤" />
            </el-radio-group>
        </el-form-item>
        <el-form-item label="配料" prop="flavouring">
            <el-checkbox-group v-model="dataForm.flavouring">
                <el-checkbox label="辣椒" name="flavouring" />
                <el-checkbox label="香菜" name="flavouring" />
                <el-checkbox label="葱" name="flavouring" />
                <el-checkbox label="醋" name="flavouring" />
                <el-checkbox label="酱油" name="flavouring" />
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="馅料" prop="productId">
            <el-radio-group v-model="dataForm.productId" v-for="food in products" v-bind:key="food.id">
                <el-radio :label=food.productId>{{food.detail}},价格：{{food.price}}元</el-radio>
                <span> </span>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="数量">
            <el-input-number v-model="dataForm.num" :min="1" :max="10" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button>Cancel</el-button>
        </el-form-item>
    </el-form>

    <el-divider><span>你的订单</span></el-divider>

    <el-table :data="order.orderDetails" style="width: 100%">
        <el-table-column prop="method" label="烧法" width="120" />
        <el-table-column prop="flavouring" label="配料" width="120" />
        <el-table-column prop="productId" label="馅料" width="220">
            <template #default="scope">
                <span>{{getProductDetail(scope.row.productId)[0].detail}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="220">
            <template #default="scope">
                <span>{{scope.row.price*scope.row.num}}元</span>
            </template>
        </el-table-column>
        <el-table-column prop="num" label="数量" width="600">
            <template #default="scope">
                <el-input-number v-model="scope.row.num" :min="1" :max="10" v-on:change="getTotalPrice()">
                </el-input-number>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="Operations" width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                    Remove
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <p>总价为：{{totalPrize}}元</p>
    <el-input v-model="order.note" placeholder="备注" />
    <el-button class="orderButton" type="primary" @click="tryPay">支付订单</el-button>
</template>

<script>
import api from '../api/api';
export default {
    data() {
        return {
            dataForm: {
                method: "",
                flavouring: [],
                productId: "",
                num: 1,
                price: 0,
            },
            products: [],
            order: {
                orderDetails: [],
                note: "",
            },
            rule: {
                method: { required: true, message: "请选择饺子的烹饪方法", trigger: 'change' },
                // flavouring:{required:true,message:"请选择饺子的调料",trigger: 'change'},
                productId: { required: true, message: "请选择饺子的馅料", trigger: 'change' }
            },
            totalPrize: 0
        }
    },
    methods: {
        onSubmit() {
            this.$refs.dataForm.validate((valid) => {
                if (valid) {
                    console.log("校验通过")
                    this.dataForm.price = this.getProductDetail(this.dataForm.productId)[0].price
                    this.order.orderDetails.push(JSON.parse(JSON.stringify(this.dataForm)))
                    console.log(this.order)
                    this.getTotalPrice()
                }
            })
        },
        deleteRow(index) {
            console.log(this.order)
            this.order.orderDetails.splice(index, 1)
            this.getTotalPrice()
        },
        getProductDetail(id) {
            let res = this.products.filter((product) => {
                return product.productId == id;
            });
            return res;
        },
        getTotalPrice() {
            this.totalPrize = 0
            for (let orderDetail of this.order.orderDetails) {
                this.totalPrize += orderDetail.price * orderDetail.num
            }
        },
        tryPay() {
            console.log(this.order);
            api.postOrderInfo(this.order).then(
                res => {
                    console.log(res)
                    if (res.msg == "success") {
                        window.alert(`支付成功,你的订单号为： ${ res.data }`)
                    }
                }
            );
        }
    },
    created() {
        api.listProducts().then(
            res => {
                this.products = res.data,
                    console.log(this.products)
            }
        )
    }
}
</script>
<style>
.orderButton {
    margin-top: 20px;
}
</style>
  